<style lang="sass">
    @import "../../style/config.scss";
    .gw-main{
        padding-top:0;
        .banner {
            .el-carousel__container {
                height:25rem; position:relative;
            }
            .el-carousel__item {
              
            }
            img {height:100%; display:block; margin:0 auto; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
        }

        .info {
            min-height:3rem; max-height:6rem; padding:1rem 0; background-color:#eee;
            h3 {padding-right:3rem; line-height:1em; color:#666;}
            ul {flex-wrap: wrap;}
            li {height:1rem; width:50%; line-height:1rem; padding:0 1rem; cursor:pointer; margin-bottom:.5rem; color:#666; box-sizing:border-box;}
            li:hover {color:$color-theme;}
        }

        .features {
            justify-content:center; padding:1rem 0;
            li {
                width:9rem; margin:0 1.2rem; cursor:pointer; border:1px solid #ccc; padding:2rem 1.2rem; border-radius:.3rem;
                &:hover {background-color:#fafafa;}
            }
            h3 {margin-top:1rem;}
            p {margin-top:.5rem;}
        }

        .cooperation {
            justify-content:center;
            flex-wrap: wrap;
            li {height:3rem; margin:.5rem;}
            img {height:100%}
        }

        .statement {
            padding:1rem 0;
            h4 {margin-top:1.6rem;}
            p {margin-top:1rem;}
            .url {color:#999;}
        }

        h2 {margin:3.5rem auto 1.5rem auto; font-size:1.3rem;}
        p {font-size:.7rem; line-height:1.6em;}
    }

  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

<template>
    <section class="gw-main">

        {{/* 轮播图 */}}
        <el-carousel class="banner" :interval="5000" arrow="always">
            <el-carousel-item v-for="(item,index) in 4" :key="index">
                <li>
                    <img :src="`l${index}.jpg`|imgServer">
                </li>                
            </el-carousel-item>
        </el-carousel>
        
        {{/* 公共系统 */}}
        <ul class="info">
            <div class="gw-center">
                <div class="hm-flex">
                    <h3>网站公告</h3>
                    <ul class="hm-flex hm-flex-1">
                        <li v-for="index in 3" @click="$router.push({name:'article',params:{id:index}})">公告 {{index}}</li>
                    </ul>
                </div>                
            </div>
        </ul>

        {{/* 轮播图 */}}
        <div class="gw-center">            
            <h2 class="hm-text-c">公司介绍</h2>
            <p>奥锋国际是以金融投资为依托，以资本运营为策略，集社区金融管理、互联网金融产品创新以及资产管理业务为一体的综合性投资管理公司。公司成立于2010年，注册资金2亿，总部坐落于香港，下设管理中心、风控中心、品牌中心、市场中心、IT中心、结算中心、财务中心、客服中心八大中心，力求从各方面为用户提供最高效的服务。目前，公司已先后在上海、广州、福州等地设有分支管理机构，业务范围覆盖全国。</p>
            
            <h2 class="hm-text-c">国际期货</h2>
            <ul class="features hm-flex">
                <li class="hm-text-c">
                    <img :src="'f1.png'|imgServer">
                    <h3>美原油</h3>
                    <p>石油期货是以远期石油价格为标的物品的期货，是期货交易中的一个交易品种</p>
                </li>
                <li class="hm-text-c">
                    <img :src="'f1.png'|imgServer">
                    <h3>美黄金</h3>
                    <p>以国际黄金市场未来某时点的黄金价格为交易标的的期货合约</p>
                </li>
                <li class="hm-text-c">
                    <img :src="'f1.png'|imgServer">
                    <h3>美白银</h3>
                    <p>以未来某一时点的白银价格为标的物的期货合约种</p>
                </li>
            </ul>
            <h2 class="hm-text-c">战略合作</h2>
            <ul class="hm-flex cooperation">
                <li v-for="index in 10">
                    <img :src="`l${index}.jpg`|imgServer">
                </li>
            </ul>
            
            <div class="statement">
                <h4 class="hm-text-c">免责声明</h4>
                <p>奥锋国际金融投资集团是富透国际交易平台运营维护方，仅对外提供官方信息发布和平台技术支持服务。在此郑重提醒：客户须妥善保管交易账户和密码，切勿交付他人管理或交易；客户应知悉任何机构或个人针对交易的任何获利保证或不发生亏损的承诺均为虚假承诺；富透国际不对外提供代客操盘，客户应自行作出具体交易决定，并对其交易行为负责。如因以上行为引起的责任和经济损失，与交易平台无关。</p>
                <p class="hm-text-c url">奥锋国际唯一指定官网：www.fafutures.com</p>
            </div>
        </div>
    </section>
</template>

<script>
export default {
    data(){
        return {

        }
    },
    computed: {

    },
    components : {

    },
    methods : {
        
    },
    mounted(){

    }
}
</script>
